<template>
    <div class="line-main" ref="lineMain"></div>
</template>
<script>
import * as echarts from 'echarts/core';
// 引入柱状图
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import VueBus, {SET_MENU_SIZE} from '@/utils/VueBus';

export default {
    name: 'lineMain',
    props: {
        isUpdate: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        dataSource: {
            type: Object,
            default: () => ({})
        },
        chartOption: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            myChart: null,
            myOption: {
                grid: {
                    left: '15%',
                    right: '15%'
                },
                title: {
                    // text: '本账单周期借款状态统计',
                    text: this.title,
                    left: 'left',
                    // padding: [0, 0, 0, 0],
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 14
                    }
                },
                // 出现tooltip和参考线
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value'
                    // offset: -5
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                        // areaStyle: {}
                    }
                ]
            }
        };
    },
    watch: {
        // dataSource(value = [[], []]) {
        dataSource(option) {
            const myChart = this.myChart;
            if (myChart && option && typeof option === 'object') {
                myChart.setOption(option, true);
            }
        }
    },
    mounted() {
        this.myChart = echarts.init(this.$refs['lineMain']);
        // 绘制图表
        this.myChart.setOption(this.myOption, true);
        window.addEventListener('resize', this.onResize);
        VueBus.$on(SET_MENU_SIZE, this.onSetMenuSize);
    },
    destroyed() {
        this.myChart = null;

        window.removeEventListener('resize', this.onResize);
        VueBus.$off(SET_MENU_SIZE, this.onSetMenuSize);
    },
    methods: {
        onSetMenuSize() {
            clearTimeout(this.timeoutid);
            this.timeoutid = setTimeout(this.onResize, 300);
        },
        onResize() {
            this.myChart.resize();
        }
    }
};
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.line-main {
    width: 100%;
    height: $--height-home-card;
    position: relative;
    z-index: 9;
}
</style>
